<template>
  <div class="app-container">
    <!-- <el-tabs v-model="activeName">
      <el-tab-pane label="数据图表" name="chart"></el-tab-pane>
      <el-tab-pane label="基本数据" name="full"></el-tab-pane>
    </el-tabs> -->
    <template v-if="activeName=='full'">
      <el-row>
        <el-tooltip effect="light" placement="top">
          <div class="toolTipGuide" slot="content">
            <div class="toolTipTitle"></div>
            <div class="toolTipItems" v-for="item,index in stepInfo" :key="index">
              <div class="stepImageContainer"> <img :src="item.stepImage" class="stepImage"></div>
              <div class="stepDesc">{{item.stepDesc}}</div>
            </div>
          </div>
          <el-button size="mini" class="filter-item" icon="el-icon-download" @click="onExportClick">导出
          </el-button>
        </el-tooltip>
      </el-row>

      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
        @sort-change='sortChange'>

        <el-table-column label="职业发展名称">
          <template slot-scope="scope">
            {{ scope.row.promotionLevelName }}
          </template>
        </el-table-column>
        <el-table-column label="平均薪酬(年薪)" prop="salary_num" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.salaryNum }}
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="tablePage.pageNum"
          :page-size="tablePage.pageSize" :page-sizes="pageSizes" :total="tablePage.total"
          @size-change="handleSizeChange" @current-change="handlePageChange" />

      </div>
    </template>
    <div class="echart" v-if="activeName=='chart'">
      <div class="averygeBarChart">
        <promotionBarChart />
      </div>
    </div>
  </div>
</template>

<script>
import {
  getPromotionSalaryList,
  getPromotionSalaryListExport,
} from "@/api/salary";
import SelectRegion from "@/components/SelectRegion";
import promotionBarChart from "@/views/position/components/promotionBarChart";
export default {
  name: "PromotionSalary",
  components: { SelectRegion, promotionBarChart },
  data() {
    return {
      activeName: "chart",
      list: null,
      listLoading: true,
      tablePage: {
        pageNum: 1, // 第几页
        pageSize: 20, // 每页多少条
        total: 0, // 总记录数
      },
      positionName: "",
      selectTime: "",
      regionId: "",
      regionList: [],
      pageSizes: [10, 20, 30],
      orderByColumn: "",
      orderBy: "",
      stepInfo: [
        {
          stepImage:
            "https://img3.job1001.com/data_center/images/exportGuide1.png",
          stepDesc: "第一步，打开导出文件",
        },
        {
          stepImage:
            "https://img3.job1001.com/data_center/images/exportGuide2.png",
          stepDesc: "第二步，选择数据范围。",
        },
        {
          stepImage:
            "https://img3.job1001.com/data_center/images/exportGuide3.png",
          stepDesc: "第三步，选择全部图表",
        },
        {
          stepImage:
            "https://img3.job1001.com/data_center/images/exportGuide4.png",
          stepDesc: "第四步，选择自己需要的样式备份",
        },
        {
          stepImage:
            "https://img3.job1001.com/data_center/images/exportGuide5.png",
          stepDesc: "第五步，图表制作完成啦！",
        },
      ],
    };
  },
  created() {
    this.fetchData();
    this.positionName = this.$route.query.name;
  },
  methods: {
    handleDateChange(val) {
      this.tablePage.pageNum = 1;
      this.fetchData();
    },
    onRegionChange(val) {
      this.tablePage.pageNum = 1;
      this.fetchData();
    },
    fetchData() {
      this.listLoading = true;
      const params = {
        id: this.$route.query.id,
        page: this.tablePage.pageNum,
        perPage: this.tablePage.pageSize,
      };
      if (this.selectTime != "") {
        params.selectTime = this.selectTime;
      }
      if (this.regionList != []) {
        params.regionId = this.regionList[this.regionList.length - 1];
      }
      if (this.orderByColumn != "" && this.orderBy != "") {
        params.orderByColumn = this.orderByColumn;
        params.orderBy = this.orderBy == "ascending" ? "asc" : "desc";
      }

      getPromotionSalaryList(params).then((response) => {
        const count = response.data.count - 0;
        this.tablePage.total = count;
        this.list = response.data.rows;
        this.listLoading = false;
      });
    },
    handlePageChange(currentPage) {
      this.tablePage.pageNum = currentPage;
      this.fetchData();
      // 在此刷新数据
    },
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize;
      this.fetchData();
      // 在此刷新数据
    },
    onExportClick() {
      // 导出方法
      this.listLoading = true;
      const params = {
        id: this.$route.query.id,
        page: 1,
        perPage: 10000,
      };
      if (this.selectTime != "") {
        params.selectTime = this.selectTime;
      }
      if (this.regionList != []) {
        params.regionId = this.regionList[this.regionList.length - 1];
      }
      if (this.orderByColumn != "" && this.orderBy != "") {
        params.orderByColumn = this.orderByColumn;
        params.orderBy = this.orderBy == "ascending" ? "asc" : "desc";
      }

      getPromotionSalaryListExport(params)
        .then((result) => {
          const link = document.createElement("a"); // 创建a标签
          const blob = new Blob([result], { type: "application/vnd.ms-excel" }); // 设置文件流
          link.style.display = "none";
          // 设置连接
          link.href = URL.createObjectURL(blob); // 将文件流转化为blob地址
          link.download =
            (this.$route.query.name != undefined
              ? this.$route.query.name
              : "") + "发展前景数据统计表";
          document.body.appendChild(link);
          // 模拟点击事件
          link.click(); // 设置点击事件
          this.listLoading = false;
          window.URL.revokeObjectURL(link.href); // 释放掉blob对象
          document.body.removeChild(link); // 下载完成移除元素
        })
        .catch((err) => {
          console.log(err);
        });
    },
    sortChange(column) {
      this.orderByColumn = column.prop != null ? column.prop : "";
      this.orderBy = column.order != null ? column.order : "";
      console.log(column);
      this.fetchData();
      // 在此刷新数据
    },
  },
};
</script>

<style scoped>
.app-container {
  padding-right: 56px;
  padding-top: 0px;
  min-height: 720px;
  /* max-height: calc(100vh - 100px); */
  /* background: linear-gradient(180deg, #eaf5ff 0%, #ffffff 100%); */
  background-image: url("https://upload.yl1001.com/upload/images/view?file=Q,tr--ap_8c=fney6Bg2IJzH69mz6q=xfFRO5e57Imp9e0psmHce_CdVSB9mv.png");
  background-size: 200% auto;
  background-repeat: no-repeat;
  border-radius: 10px 8px 8px 8px;
  border: 0;
  padding-top: 10px;
  width: 100%;
}
.regionBarChart,
.regionLineChart {
  display: flex;
  align-items: center;
  width: 100%;
}
.search-container {
  /* margin-bottom: 24px; */
}
.pagination {
  margin-top: 24px;
}
::v-deep .el-table th > .cell {
  color: rgba(0, 0, 0, 0.85);
}
::v-deep .el-table th {
  background-color: #fafafa;
}
::v-deep.el-form--inline .el-form-item {
  margin-right: 24px;
}
.filter-item {
  margin-bottom: 12px;
}

.toolTipGuide {
  display: flex;
}
.toolTipItems {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.stepImageContainer {
}
.stepImage {
  width: 264px;
  height: 149px;
}
.stepDesc {
  margin-top: 14px;
  font-size: 14px;
}
::v-deep .el-tabs__item {
  height: 40px !important;
  color: #999999;
  font-size: 16px;
}
::v-deep .el-tabs__item.is-active {
  color: #1574ff;
  font-weight: bold;
}
::v-deep .el-tabs__nav-wrap::after {
  background-color: #d6dfff;
  height: 1px;
}
::v-deep .el-tabs__item {
  height: 40px !important;
  color: #999999;
}
::v-deep .el-tabs__item.is-active {
  color: #1574ff;
}
</style>
